<template>
  <div>
    <Form :model="user" :label-width="80">
      <FormItem label="头像">
        <Upload action="//jsonplaceholder.typicode.com/posts/">
          <Avatar shape="square" :src="user.avatar" icon="ios-person" size="large" />
        </Upload>
      </FormItem>
      <FormItem label="用户名称">
        <Input type="text" v-model="user.name"></Input>
      </FormItem>
      <FormItem label="电子邮箱">
        <Input type="email" v-model="user.email"></Input>
      </FormItem>
      <FormItem label="DoMain">
        <Input type="email" v-model="user.domain"></Input>
      </FormItem>
      <FormItem label="喜欢颜色">
        <ColorPicker v-model="color1" recommend />
      </FormItem>
      <FormItem label="住址">
        <Input type="text" v-model="user.address"></Input>
      </FormItem>
      <FormItem label="个人介绍">
        <Input v-model="user.intro" maxlength="500" show-word-limit type="textarea" />
      </FormItem>
      <!-- <FormItem label="角色类型">
        <Input type="text" v-model="user.role"></Input>
      </FormItem>
      <FormItem label="手机号码">
        <Input type="text" v-model="user.mobile"></Input>
      </FormItem> -->
      <!-- <FormItem label="性别">
        <RadioGroup v-model="user.sex">
          <Radio :label="1" border>男</Radio>
          <Radio :label="0" border>女</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="出生日期">
        <DatePicker v-model="user.birthday" format="yyyy年MM月dd日" type="date" placeholder="出生日期"></DatePicker>
      </FormItem> -->

    </Form>
  </div>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: () =>{}
    }
  },
  data () {
    return {
      user: this.userInfo,
      color1: '#19be6b'
    };
  },
  created() {
    if (Object.keys(this.userInfo).length > 0) {
      this.color1 = this.userInfo.likecolor;
    }
  },
  watch: {
    color1(newV) {
      this.color1 = newV;
      this.userInfo.likecolor = this.color1;
    }
  },
  methods: {

  }
};
</script>

<style>
</style>
